<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax上传文件测试</title>
    <script src="js/jquery.min.js"></script>

</head>
<body>
<div class="form-group">
    <label for="crowd_file" class="col-sm-2 control-label">选择上传文件</label>
    <div class="col-sm-10">
        <input type="file" accept=".png,.jpg,.jpeg,image/png,image/jpg,image/jpeg" id="crowd_file">
    </div>
    <button id="uploadBtn">开始上传</button>
</div>
</body>
<script>
    $(function () {
        var $input =  $("#crowd_file");
        // ①为input设定change事件
        $input.change(function () {
            //    ②如果value不为空，调用文件加载方法
            if($(this).val() != ""){
                fileLoad();
            }
        })
    })


    function fileLoad(){
        alert('开始！');
        var crowd_file = $("#crowd_file")[0].files[0];

        var formData = new FormData();

        formData.append("file",$("#crowd_file")[0].files[0]);

        $.ajax({
            url:'/ajax_upload/',
            dataType:'json',
            type:'POST',
            data: formData,
            processData : false, // 使数据不做处理
            contentType : false, // 不要设置Content-Type请求头
            success: function(data){
                console.log(data);
                if (data.code == '20000') {
                    alert('上传成功！');
                }

            },
            error:function(response){
                console.log(response);
            }
        });
    }


    $("#uploadBtn").click(function () {


    })

</script>
</html>